<template>
  <div>
    <todo-header @add-todo="addTodo"></todo-header>
    <todos
      :data="todoList"
      @toggle-completed="toggleCompleted"
      @remove-todo="removeTodo"
    ></todos>
    <todo-footer
    @remove-all="removeAll"></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoInput from './components/TodoInput'
import Todos from './components/Todos'
export default {
  name: 'TodoList',
  components: {
    TodoHeader,
    TodoInput,
    Todos,
  },
  // provide 如果要使用到 data 数据，需要使用这种书写方式
  provide() {
    return {
      placeholder: Vue.completed(() => this.placeholder),
      todoLen: Vue.completed(() => this.todoList.length)
    }
  },
  data() {
    return {
      todoList: [],
      placeholder: '请输入你的任务名称，按回车键确认',
    }
  },
  mounted() {
    setTimeout(() => {
      this.placeholder = '请输入你的任务名称，按回车键确认'
    }, 1000)
  },
  methods: {
    /**
     * 添加任务
     */
    addTodo(todo) {
      this.todoList.push(todo)
    },
    /**
     * 处理任务完成状态
     */
    toggleCompleted(id) {
      this.todoList = this.todoList.map((item) => {
        if (item.id === id) {
          item.completed = !item.completed
        }
        return item
      })
    },
    /**
     * 移除任务
     */
    removeTodo(id) {
      this.todoList = this.todoList.filter((item) => item.id !== id)
    },
    /**
     * 清空数据
     */
    removeAll(){
      this.todoList = []
    }
  },
}
</script>

<style lang="scss" scoped></style>
